<script setup>
import { routeQuery } from "@/hook/routerHandle.js";
import { payLiveOrderAPI } from "@/server/api/rechargeOrder";
import { showSuccessToast, showFailToast } from "vant";
import { useUseStore } from "@/stores/user";
import { getInfoAPI } from "@/server/api/userInfo";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { getJWTFun } from "@/hook/jsrsasign";

import { useI18n } from "vue-i18n";
const { t } = useI18n();
const query = routeQuery();
console.log("money:", query);

const userStore = useUseStore();
const userInfome = ref({}); //定义用户余额数据
const route = useRoute();
const router = useRouter();

//定义下单接口函数
const payLiveOrder = async (id) => {
  const res = await payLiveOrderAPI(id);
  if (res.data.code == 200) {
    showSuccessToast(t("pay.success"));
    router.push({
      path: "Successful",
      query: { price: query.needPayMoney },
    });
  } else {
    showFailToast(t("pay.fail"));
  }
  console.log(res);
};
// 获取用户余额数据
const getInfo = async () => {
  const res = await getInfoAPI(userStore.userId);
  userInfome.value = res.data.data;
  console.log(res);
};

// 点击付款函数u
const pay = () => {
  const paymentSuccess =
    userInfome.value.pointBalance > Number(query.needPayMoney);
  if (!paymentSuccess) {
    showFailToast(t("pay.fail"));
  }
  const requestData = {
    transactionAmount: query.needPayMoney + "",
    orderId: query.orderId,
    commodityId: query.commodityId,
    uid: userStore.userId,
    number: 1,
    exp: Math.floor(Date.now() / 1000) + 600, // 过期时间（当前时间戳加10分钟）
  };
  const token = getJWTFun(requestData);

  payLiveOrder(token);
};
onMounted(() => {
  getInfo();
});
</script>

<template>
  <!-- 支付页面 -->
  <div class="pay">
    <!-- 头部 -->
    <div class="header">
      <div class="left" @click="$router.back()">
        <img src="/images/Shop/hotelBackBtn.png" />
      </div>
      <div class="title">Pay for orders</div>
    </div>

    <!-- 价格 -->
    <div class="price">
      Pi <span>{{ query.needPayMoney }}</span>
    </div>

    <!-- 商品信息 -->
    <div class="product-information">
      <!-- 商品名 -->
      <div class="name">Single player script kill</div>

      <!-- to地址 -->
      <div class="to">
        <div class="title-to">Address</div>

        <div class="text-down">
          <!-- 地址 -->
          <div class="text-to">
            Room 501,Unit 6,Building 20 North Donghuashi Residential BeiJing
            City
          </div>
        </div>
      </div>
    </div>

    <!-- 占位 -->
    <div class="Placeholder"></div>

    <!-- 支付按钮 -->
    <div class="botton" @click="pay">{{ $t("order.pay") }}</div>

    <!-- 提示弹窗 -->
    <div class="box300" v-show="false"></div>
  </div>
</template>

<style lang="scss" scoped>
.pay {
  background-color: rgba(245, 245, 245, 1);
  height: 843rem;
  overflow: hidden;

  .header {
    width: 360rem;
    height: 24rem;
    padding: 16rem 16rem;
    display: flex;
    align-items: center;

    .left {
      width: 24rem;
      height: 24rem;
      line-height: 34rem;

      img {
        width: 24rem;
      }
    }

    .title {
      height: 28rem;
      margin-left: 90rem;
      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      text-align: center;
      color: rgba(102, 102, 102, 1);
    }
  }

  .price {
    color: rgba(100, 46, 142, 1);
    font-size: 24rem;
    text-align: center;
    margin-top: 86rem;
    margin-bottom: 64rem;

    span {
      font-size: 48rem;
    }
  }

  .product-information {
    background-color: #fff;
    border-radius: 12rem;
    font-size: 16rem;
    padding: 12rem 12rem 10rem;
    margin: 12rem 16rem 27rem 16rem;

    .name {
      max-width: 309rem;
      max-height: 48rem;

      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      color: rgba(51, 51, 51, 1);

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .to {
      display: flex;
      font-size: 12rem;
      margin: 55rem 0 18rem;
      align-items: center;

      .title-to {
        color: #ccc;
        text-align: center;
      }

      .text-down {
        font-size: 12rem;
        color: #666;
        margin-left: 12rem;

        .text-to {
          max-width: 247rem;
          max-height: 32rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .seller {
          display: flex;
          font-size: 14rem;

          .sellphome {
            margin-top: 3rem;
            margin-left: 7rem;
            font-weight: 600;
          }
        }
      }
    }
  }

  .botton {
    color: #fff;
    background-color: rgba(100, 46, 142, 1);
    font-size: 20rem;
    margin: 0 16rem;
    border-radius: 8rem;
    position: fixed;
    bottom: 34rem;
    padding: 11rem 162rem;
  }
}

.box300 {
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 16rem;
  border: none;
  width: 360rem;
  height: 50rem;
  border-radius: 99rem;
  position: fixed;
  z-index: 9999;
  bottom: 180rem;
  left: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>
